<template>
     <div style='width:100%;text-align:center;overflow:hidden'>
        <img id="bigPriDev" width="640" height="480"  :src="src"/>
        <div style='width:100%;text-align:left;padding-left:20px;' class='bottoms'>
            <span style='cursor:pointer;margin-right:15px' @click="start('bStartPlay')">主摄像头</span>
            <span style='cursor:pointer' @click="start('bStartPlay2(0)')">副摄像头</span>
            <el-button type="primary" @click="uploads" style='margin-left:100px'>上传</el-button>
            <el-button type="primary" @click="closes()" >关闭</el-button>
        </div>
    </div>
</template>
<script>
export default {
    name:"high-shotjy",
    props:["show","appid","showType","params"],
    data(){
        return{
            webSocket:null,
            src:"",
            timer:null
        }
    },
    created(){
       
        this.initVideo();
    },
    methods:{
        initVideo(){
            this.webSocket =new WebSocket('ws://localhost:1818');
            let that=this;
            window.onbeforeunload = function() {
                //that.webSocket.send("bStopPlay()");
                //webSocket.send("bStopPlay3()");
            };
            this.webSocket.onerror = function(event) {
                that.onError(event);
                //   alert(event.data);
            };
            
            this.webSocket.onopen = function(event) {
                that.onOpen(event);
               // window.setTimeout(function(){
                    that.start('bStartPlay')
               // },500)
                
                //webSocket.send('bStartPlay(0)');
                //alert(event.data);
            };
            this.webSocket.onclose = function(event) {
                that.onClose(event);
                //that.webSocket.send("bStopPlay()");
                
                //webSocket.send("bStopPlay4()");
                //   alert(event.data);
            };
            this.webSocket.onmessage = function(event) {
                that.onMessage(event)
            }
           
        },
        onError(event){

        },
        onOpen(event){

        },
        onClose(event){
           // this.webSocket.send("bStopPlay()");
            //webSocket.send("bStopPlay4()");
	    },
        onMessage(event) {
            let begin_data="data:image/jpeg;base64,";
            if(event.data.indexOf('BarCodeTransferBegin')>=0){
                //alert(event.data.replace('BarCodeTransferBegin','').replace('BarCodeTransferEnd',''));
            } else if (event.data.indexOf('BeginsGetBase64')>=0) {
               // alert(event.data.replace('BeginsGetBase64','').replace('EndsGetBase64',''));
               // BS64=event.data.replace('BeginsGetBase64','').replace('EndsGetBase64','');
            } else if (event.data.indexOf('BeginGetName')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
               // alert(event.data.replace('BeginGetName','').replace('EndGetName',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            } else if (event.data.indexOf('BeginGetSex')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
               // alert(event.data.replace('BeginGetSex','').replace('EndGetSex',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            } else if (event.data.indexOf('BeginGetFolk')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
               // alert(event.data.replace('BeginGetFolk','').replace('EndGetFolk',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            } else if (event.data.indexOf('BeginGetCode')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
             //   alert(event.data.replace('BeginGetCode','').replace('EndGetCode',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            } else if (event.data.indexOf('BeginGetBirthYear')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
               // alert(event.data.replace('BeginGetBirthYear','').replace('EndGetBirthYear',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            } else if (event.data.indexOf('BeginGetBirthMonth')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
                //alert(event.data.replace('BeginGetBirthMonth','').replace('EndGetBirthMonth',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            } else if (event.data.indexOf('BeginGetBirthDay')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
               // alert(event.data.replace('BeginGetBirthDay','').replace('EndGetBirthDay',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            } else if (event.data.indexOf('BeginGetAddress')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
              //  alert(event.data.replace('BeginGetAddress','').replace('EndGetAddress',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            } else if (event.data.indexOf('BeginGetAgency')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
              //  alert(event.data.replace('BeginGetAgency','').replace('EndGetAgency',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            } else if (event.data.indexOf('BeginGetValidtotal')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
               // alert(event.data.replace('BeginGetValidtotal','').replace('EndGetValidtotal',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            } else if (event.data.indexOf('BeginGetValidBegin')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
               // alert(event.data.replace('BeginGetValidBegin','').replace('EndGetValidBegin',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            } else if (event.data.indexOf('BeginGetValidEnd')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
               // alert(event.data.replace('BeginGetValidEnd','').replace('EndGetValidEnd',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            } else if (event.data.indexOf('BeginReadNewAppMsg')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
               // alert(event.data.replace('BeginReadNewAppMsg','').replace('EndReadNewAppMsg',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            } else if (event.data.indexOf('BeginGetNewAddress')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
               // alert(event.data.replace('BeginGetNewAddress','').replace('EndGetNewAddress',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            } else if (event.data.indexOf('BeginGetPhotobuf')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
              //  alert(event.data.replace('BeginGetPhotobuf','').replace('EndGetPhotobuf',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            } else if (event.data.indexOf('BeginGetJPGPhotobuf')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
             //   alert(event.data.replace('BeginGetJPGPhotobuf','').replace('EndGetJPGPhotobuf',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            } else if (event.data.indexOf('BeginGetSAMID')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
             //   alert(event.data.replace('BeginGetSAMID','').replace('EndGetSAMID',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            } else if (event.data.indexOf('BeginGetBirthDate')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
              //  alert(event.data.replace('BeginGetBirthDate','').replace('EndGetBirthDate',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            } else if (event.data.indexOf('BeginGetFPData')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
             //   alert(event.data.replace('BeginGetFPData','').replace('EndGetFPData',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            } else if (event.data.indexOf('BeginbLivingBodyDetect')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
               // alert(event.data.replace('BeginbLivingBodyDetect','').replace('EndbLivingBodyDetect',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            }else if (event.data.indexOf('BeginlImageMatch')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
               // alert(event.data.replace('BeginlImageMatch','').replace('EndlImageMatch',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            }
            else if (event.data.indexOf('BeginBase64Encode')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
              //  alert(event.data.replace('BeginBase64Encode','').replace('EndBase64Encode',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            }
            else if (event.data.indexOf('BeginbDeleteFile')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
             //   alert(event.data.replace('BeginbDeleteFile','').replace('EndbDeleteFile',''));
                //alert(begin_data + event.data.substring(0, event.data.length - 11));
            }
                else if (event.data.indexOf('BeginbStartPlay2')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
               // alert(event.data.replace('BeginbStartPlay2','').replace('EndbStartPlay2',''));
                }
            
            else if (event.data.indexOf('BeginbStartPlay')>=0) {
                //document.getElementById("preview").src = begin_data + event.data.substring(0, event.data.length - 11);
             //   alert(event.data.replace('BeginbStartPlay','').replace('EndbStartPlay',''));
              //  alert('2');
                }
            
            else {
                this.src =begin_data+event.data;
            }
            
                //document.getElementById('photo').src =begin_data+event.data;
            //	document.getElementById('result').value = event.data;
            //	document.getElementById('photo').src =event.data;
       
        },
        start(el) {
        
          /*  if(el=='bStartRec(d:\\test.avi)')
            {
                timer = window.setInterval("TimeGo()",1000);
            }
            if(el=='bStopRec')
            {
                window.clearInterval(timer);
                TotalTimelenth=0;
                alert("录屏结束");
            }*/
            this.webSocket.send(el);
            return false;
        },

        uploads(){
           this.$post(this.appid,"/api/file/fileUploadBase64",{data:this.src.replace("data:image/jpeg;base64,",""),model:this.params.model,type:this.params.type,id:this.params.id,token:this.params.token,name:this.params.name}).then(data=>{
                console.log("uploadImg==========================");
                console.log(data);
                this.$emit("uploadImg",JSON.stringify(data))
            });
        },
        closes(){
            this.webSocket.send("bStopPlay()");
            this.webSocket.close();
            this.$emit("closes","");
        }
    }
}
</script>